<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>元数据模板列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-table :data="tableData" border stripe class="mt15">
            <el-table-column type="index" width="60"></el-table-column>
            <el-table-column prop="name" label="名称" sortable></el-table-column>
            <el-table-column prop="code" label="编号" sortable></el-table-column>
            <el-table-column prop="type" label="类型" sortable></el-table-column>
            <el-table-column label="操作">
                <template scope="scope">
                    <el-button type="text" size="small" @click="view(scope.row.id)">查看</el-button>
                    <el-button type="text" size="small" @click="handleTag(scope.row.id)">标签</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page fr">
            <el-pagination @size-change="handleSizeChange" @current-change="queryPage" :current-page="1"
                           :page-sizes="[10, 25, 50, 100]" :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
        </div>
        <tag-edit meta-url="/api/metaTemplate" :tag-id="tagPId" :visible="tShow" @on-cancel="tagClose"></tag-edit>
    </div>
</template>
<script>
    import axios from '~plugins/axios';
    import TagEdit from '~components/tagEdit.vue';

    export default {
        layout: 'admin',
        components: {
            TagEdit
        },
        head() {
            return {title: '元数据模板列表'};
        },
        data() {
            return {
                tagPId: '',
                tShow: false,
                currentPage: 1, // 当前页数
                pageSize: 10 // 每页条数
            };
        },
        asyncData() {
            return axios.get(`/api/metaTemplate/page/0-10`).then(res => {
                return {
                    tableData: res.data['content'], // 数据
                    total: res.data['totalElements'] // 总条数
                };
            });
        },
        methods: {
            handleSizeChange(val) {
                this.pageSize = val;
                this.queryPage(1);
            },
            queryPage(page) {
                axios.get(`/api/metaTemplate/page/${(--page)}-${this.pageSize}`).then(res => {
                    this.tableData = res.data['content'];
                    this.total = res.data['totalElements'];
                });
            },
            view(id) {
                this.$router.push({path: '/admin/meta/view', query: {id: id}});
            },
            handleTag(id) {
                this.tagPId = id;
                this.tShow = true;
            },
            tagClose(flag) {
                this.tShow = flag;
            }
        }
    };
</script>